<template>
	<view class="container">
		<view class="search-number">
			<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
			<fansNavList :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></fansNavList>
			<!--搜索筛选-->
			<!-- 内容页面位置 -->
			<view class="swiper-item">
				<view @click="choose_created_at()">
					加入时间
					<view class="goods-search-image" v-if="create_time_falg == 0">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="create_time_falg == 1">
						<image src="../../static/buytao/up.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="create_time_falg == 2">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down.png" mode="widthFix" lazy-load></image>
					</view>
				</view>
				<view @click="choose_team_scale()">
					团队人数
					<view class="goods-search-image" v-if="team_scale_falg == 0">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="team_scale_falg == 1">
						<image src="../../static/buytao/up.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down_n.png" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-search-image" v-if="team_scale_falg == 2">
						<image src="../../static/buytao/up_n.png" mode="widthFix" lazy-load></image>
						<image src="../../static/buytao/down.png" mode="widthFix" lazy-load></image>
					</view>
				</view>
				<view>
					筛选
				</view>
			</view>
			<view class="fans-invite-num">
				<view>共有直邀<text>{{fans_num.directCount}}</text>  有效<text>{{fans_num.logindirectCount}}</text></view>
			</view>
		</view>
		
		<view class="zhanwei"></view>		
		
		<!-- 内容页 -->
		<swiper :style="{height:swiperheight+'px'}" :current="current" :autoplay="false" :duration="100" @change="changeSwiper">
			<swiper-item v-for="(items,index) in navData" :key="index">					
				<view class="fans-invite-list" v-for="(items_v,index_k) in fans_list">
					<view class="fans-invite-item">
						<view class="fans-invite-item-left">
							<image :src="items_v.avatar || '/static/buytao/index-right.png'"></image>
						</view>
						<view class="fans-invite-item-middle">
							<view>{{items_v.nickname}}</view>
							<view>手机号：{{items_v.phone}}</view>
						</view>
						<view class="fans-invite-item-right">
							<text>详情</text>
						</view>
					</view>
					<view class="fans-invite-item-num">
						<view class="fans-invite-item-data">
							<view>今日预估</view>
							<view>￥{{items_v.money_today_estimate}}</view>
						</view>
						<view class="fans-invite-item-data">
							<view>本月预估</view>
							<view>￥{{items_v.money_month_estimate}}</view>
						</view>
						<view class="fans-invite-item-data">
							<view>今日直邀</view>
							<view>{{items_v.today_user_estimate}}</view>
						</view>
						<view class="fans-invite-item-data">
							<view>本月直邀</view>
							<view>{{items_v.month_user_estimate}}</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="more"></uni-load-more>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import tools from "../../common/tools"
	import apifans from '../../common/api/fans'
	import fansNavList from '@/components/fans/fans-nav-list'
	export default {
		data() {
			return {
				more:'loading',
				// 导航栏数据
				navData: [
					{
						name: '潜在粉丝'
					},
					{
						name: '直推粉丝'
					},
					{
						name: '团队粉丝'
					}
				],
				fans_list:[],
				fans_params:{
					type:1,
					page:1,
					page_size:10,
					jointime:'',
					team_scale:'',
				},
				// swiper动态高度
				swiperheight:142,//屏幕高度
				tabIndex:0,//tab索引
				current:0,
				refreshering: true,
				
				//粉丝数统计
				fans_num:{},
				
				
				//筛选标识
				create_time_falg:0,
				team_scale_falg:0,
			}
		},
		components:{
			fansNavList,
			apifans,
			uniLoadMore
		},
		onShow(){
			tools.is_has_login('hasLogin')
			this.fansself()
			this.self_fans_number()
		},
		onLoad() {
		},
		//上拉加载更多
		onReachBottom:function() {
			this.goods_more_search()
		},
		methods: {
			//根据时间筛选
			choose_created_at(){
				this.create_time_falg = this.create_time_falg==1?2:1
				switch(this.create_time_falg){
					case 0:
						this.fans_params.jointime=''
						break;
					case 1:
						this.fans_params.jointime='DESC'
						break;
					case 2:
						this.fans_params.jointime='ASC'
						break;
					default:
						this.fans_params.jointime=''
						break;
				}
				this.team_scale_falg=0
				this.fans_list=[]
				this.swiperheight=0
				this.fans_params.team_scale=''
				this.fans_params.page=1
				this.fansself()
			},
			
			//根据团队人数
			choose_team_scale(){
				this.team_scale_falg = this.team_scale_falg==1?2:1
				switch(this.team_scale_falg){
					case 0:
						this.fans_params.team_scale=''
						break;
					case 1:
						this.fans_params.team_scale='DESC'
						break;
					case 2:
						this.fans_params.team_scale='ASC'
						break;
					default:
						this.fans_params.team_scale=''
						break;
				}
				this.create_time_falg=0
				this.fans_list=[]
				this.swiperheight=0
				this.fans_params.jointime=''
				this.fans_params.page=1
				this.fansself()
			},
			
			
			//上拉加载更多
			goods_more_search(){
				this.fans_params.page = this.fans_params.page+1
				apifans.fansself(this.fans_params).then(res =>{
					if(res.code == 1){
						if(res.data.items.length != 0){
							this.fans_list = this.fans_list.concat(res.data.items);//合并数组
							let current_height = (res.data.items.length) * 142
							this.swiperheight = this.swiperheight+current_height 
							this.more='loading'
						}else{
							this.more='noMore'
						}
					}else{
						this.more='noMore'
					}
				}).catch(cateres =>{
					
				});
			},
			
			
			//请求接口
			fansself(){
				apifans.fansself(this.fans_params).then(res =>{
					if(res.code == 1){
						if(res.data.items.length != 0){
							this.swiperheight = res.data.items.length*142+50;
							this.fans_list = res.data.items
							if(this.swiperheight<600){
								this.more='noMore'
							}else{
								this.more='loading'
							}
						}else{
							this.more='noMore'
						}
					}else{
						this.more='noMore'
					}
				}).catch(cateres =>{
					
				});
			},
			
			//粉丝数量
			self_fans_number(){
				apifans.self_fans_number({}).then(res =>{
					if(res.code == 1){
						this.fans_num=res.data
						console.log(this.fans_num)
					}
				}).catch(cateres =>{
					
				});
			},
			
			// 选择导航栏事件
			changeTab(index){
				this.more='loading'
				this.current = index
				this.swiperheight=142
				this.fans_list=[]
				this.fans_params.page=1
				switch(this.current){
					case 0:
						this.fans_params.type=1;
						break;
					case 1:
						this.fans_params.type=2;
						break;
					case 2:
						this.fans_params.type=3;
						break;
					default:
						this.fans_params.type=1;
						this.current=1;
						break;
				}
				this.fansself(this.fans_params);
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.more='loading'
				this.current = e.detail.current
				this.swiperheight=142
				this.fans_list=[]
				this.fans_params.page=1
				switch(this.current){
					case 0:
						this.fans_params.type=1;
						break;
					case 1:
						this.fans_params.type=2;
						break;
					case 2:
						this.fans_params.type=3;
						break;
					default:
						this.fans_params.type=1;
						this.current=1;
						break;
				}
				this.fansself(this.fans_params);
				//this.$emit('changeNavIndex', e.detail.current)
			},
			// 下拉刷新事件
			refresher() {
				var that = this
				that.refreshering = true
				console.log('下拉刷新')
				setTimeout(function() {
					that.refreshering = false
					console.log('刷新成功')
				},2000)
			}
		}
	}
</script>

<style scoped>
	
	.goods-search-image{
		width:40upx;
		height:40upx;
		display:inline-block;
		position:relative;
		top:5upx;
	}
	.goods-search-image>image{
		margin-left:10upx;
		margin-top:3upx;
		display:block;
		width:15upx;
	}
	
	/*搜索*/
	.search{
		position:fixed;
		width: 100%;
		height: 80rpx;
		line-height:80upx;
		background-color:#FFFFFF;
		z-index:100;
		padding:5upx;
	}
	.search-box{
		width:90%;
		height: 80rpx;
		line-height:80upx;
		margin:0 auto;
		background-color:#F5F5F5;
		border-radius:20upx;
	}
	.zhanwei{
		height:250upx;
	}
	.search-number{
		width: 100%;
		background-color:#FFFFFF;
		position: fixed;
		z-index:100;
	}
	.position-fans{
		width: 100%;
		height: 240upx;
	}
	uni-swiper{
		height:100%;
	}
	::-webkit-scrollbar {
       width: 0;
       height: 0;
       color: transparent;
    }
	.swiper-item>view{
		display: inline-block;
		width:33%;
		text-align:center;
		height:80upx;
		line-height:80upx;
	}
	.fans-invite-num{
		width: 100%;
		height:80upx;
		background:#F5F5F5;
		padding-left:20upx;
	}
	.fans-invite-num>view{
		line-height:80upx;
	}
	.fans-invite-num>view>text{
		color:#FF3333;
		padding:0 20upx;
		font-size:35upx;
		font-weight:bold;
	}
	.fans-invite-list{
		width:100%;
		height:280upx;
		overflow:hidden;
		border-bottom:1px solid #CCCCCC;
	}
	.fans-invite-item{
		width:96%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding:2%;
	}
	.fans-invite-item-left{
		width:20%;
	}
	.fans-invite-item-left>image{
		width:120upx;
		height:120upx;
		border-radius:60upx;
	}
	.fans-invite-item-middle{
		margin-top:15upx;
		width:65%
	}
	.fans-invite-item-middle>view:first-child{
		font-weight:bold;
		font-size:30upx;
	}
	.fans-invite-item-right{
		width:15%;
		margin-top:30upx;
	}
	.fans-invite-item-right>text{
		background-color:#F5F5F5;
		padding:10upx 20upx;
		border-radius:15upx;
	}
	.fans-invite-item-num{
		width:96%;
		padding-bottom:2%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.fans-invite-item-data{
		width:25%;
	}
	.fans-invite-item-data>view{
		text-align:center;
	}
	.fans-invite-item-data>view:last-child{
		font-weight:bold;
		font-size:30upx;
	}
	
	
</style>
